<!DOCTYPE html>
<html>
<head>
    <title>行内块元素</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin-top: 150px;
            text-align: center;
        }
        .box a{
            display: inline-block;
            height: 36px;
            width: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-decoration: none;
            color: black;
            line-height: 36px;
            text-align: center;
        }
        .box .prev,
        .box .next{
            width: 100px;
        }

        .box .cur,
        .box .ecl{
            border: 0;
            background-color: #fff;
        }
        .box input{
            width: 50px;
            height: 36px;
            line-height: 36px;
        }
        .box button{
            width: 50px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#" class="cur">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#" class="ecl">···</a>
        <a href="#">15</a>
        <a href="#" class="next">下一页&gt;&gt;</a>
         到第
        <input type="text">页
        <button>确定</button>
    </div>
</html>